<%--
  Created by IntelliJ IDEA.
  User: dab
  Date: 2025/7/12
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>病虫害预警与防治</title>
  <style>
    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
      color: white;
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 10;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo h1 {
      font-size: 24px;
      font-weight: 700;
    }

    .user-info {
      display: flex;
      align-items: center;
    }

    .user-info span {
      margin-right: 15px;
      font-weight: 500;
    }

    .user-info .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #f1f8e9;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #4caf50;
      font-weight: 600;
      cursor: pointer;
      position: relative;
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      padding: 8px 0;
      min-width: 160px;
      z-index: 100;
      display: none;
      margin-top: 10px;
    }

    .dropdown-menu.show {
      display: block;
    }

    .dropdown-item {
      display: block;
      padding: 10px 20px;
      color: #333;
      text-decoration: none;
      transition: background-color 0.2s;
    }

    .dropdown-item:hover {
      background-color: #f1f8e9;
      color: #2e7d32;
    }

    .dropdown-divider {
      height: 1px;
      background-color: #e0e0e0;
      margin: 8px 0;
    }

    /* 主内容区域 */
    .main-content {
      display: flex;
      min-height: calc(100vh - 80px);
    }

    /* 左侧导航 */
    .sidebar {
      width: 220px;
      background: #e8f5e9;
      padding: 20px 0;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 5;
    }

    .nav-group {
      margin-bottom: 30px;
    }

    .nav-title {
      color: #2e7d32;
      font-size: 16px;
      font-weight: 600;
      padding: 10px 25px;
      margin-bottom: 10px;
    }

    .nav-item {
      display: block;
      padding: 12px 25px;
      color: #334155;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .nav-item:hover {
      background-color: #c8e6c9;
      color: #2e7d32;
    }

    .nav-item.active {
      background-color: #a5d6a7;
      color: #2e7d32;
      font-weight: 500;
      border-left: 4px solid #4caf50;
    }

    /* 内容区域 */
    .content {
      flex: 1;
      padding: 30px;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    
    body {
      min-height: 100vh;
      background-color: #f8faf6;
      color: #334155;
      line-height: 1.6;
    }
    
    .container {
      width: 90%;
      margin: 0 auto;
      padding: 20px;
      max-width: 1200px;
    }
    
    .page-header {
      margin-bottom: 30px;
      position: relative;
    }
    
    .page-title {
      font-size: 28px;
      font-weight: 600;
      color: #2e7d32;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }
    
    .page-title::before {
      content: "🐛";
      margin-right: 10px;
      font-size: 32px;
    }
    
    .warning-section {
      margin-bottom: 30px;
    }
    
    .warning-alert {
      background: #ffebee;
      border-left: 4px solid #d32f2f;
      padding: 15px 20px;
      margin-bottom: 20px;
      border-radius: 0 8px 8px 0;
      box-shadow: 0 2px 10px rgba(211, 47, 47, 0.1);
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 2px 10px rgba(211, 47, 47, 0.1); }
      50% { box-shadow: 0 2px 15px rgba(211, 47, 47, 0.2); }
      100% { box-shadow: 0 2px 10px rgba(211, 47, 47, 0.1); }
    }
    
    .warning-alert h3 {
      color: #d32f2f;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }
    
    .warning-alert p {
      margin-bottom: 0;
    }
    
    .section-title {
      font-size: 22px;
      font-weight: 600;
      color: #2e7d32;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
    }
    
    .section-title::after {
      content: "";
      flex-grow: 1;
      height: 2px;
      background: linear-gradient(to right, #4caf50, transparent);
      margin-left: 15px;
    }
    
    .pest-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }
    
    .pest-card {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(76, 175, 80, 0.1);
    }
    
    .pest-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .pest-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #4caf50, #81c784);
    }
    
    .pest-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .pest-img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 8px;
      margin-right: 15px;
      border: 1px solid #eee;
    }
    
    .pest-info {
      flex: 1;
    }
    
    .pest-name {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 5px;
      color: #2e7d32;
    }
    
    .risk-level {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    
    .risk-high {
      background: #ffebee;
      color: #d32f2f;
    }
    
    .risk-medium {
      background: #fff3e0;
      color: #f57c00;
    }
    
    .risk-low {
      background: #e8f5e9;
      color: #388e3c;
    }
    
    .pest-description {
      margin-bottom: 15px;
      color: #546e7a;
    }
    
    .btn {
      display: inline-block;
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      margin-right: 10px;
    }
    
    .btn-primary {
      background: #4caf50;
      color: white;
    }
    
    .btn-primary:hover {
      background: #388e3c;
    }
    
    .btn-secondary {
      background: #e8f5e9;
      color: #2e7d32;
      border: 1px solid rgba(76, 175, 80, 0.3);
    }
    
    .btn-secondary:hover {
      background: #c8e6c9;
    }
    
    .upload-section {
      margin-top: 30px;
      background: white;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(76, 175, 80, 0.1);
    }
    
    .upload-form {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .file-input-wrapper {
      position: relative;
      overflow: hidden;
      display: inline-block;
      width: 100%;
    }
    
    .file-input-wrapper input[type=file] {
      position: absolute;
      left: -9999px;
    }
    
    .file-input-label {
      display: block;
      padding: 12px 15px;
      background: #f1f8e9;
      border: 2px dashed #81c784;
      border-radius: 8px;
      color: #2e7d32;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .file-input-label:hover {
      background: #e8f5e9;
      border-color: #4caf50;
    }
    
    .file-input-wrapper.highlight {
      background: #e8f5e9;
      border-radius: 8px;
    }
    
    .file-input-wrapper.highlight .file-input-label {
      background: #c8e6c9;
      border-color: #4caf50;
      border-style: solid;
    }
    
    .file-name {
      margin-top: 8px;
      font-size: 14px;
      color: #546e7a;
      text-align: center;
    }
    
    .btn-submit {
      background: #2196f3;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      align-self: flex-start;
    }
    
    .btn-submit:hover {
      background: #1976d2;
    }
    
    .result-container {
      margin-top: 20px;
      padding: 15px;
      background: #f1f8e9;
      border-radius: 8px;
      display: none;
    }
    
    .result-title {
      font-weight: 600;
      margin-bottom: 10px;
      color: #2e7d32;
    }
    
    .result-content {
      color: #546e7a;
    }
    
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    }
    
    .modal-content {
      background: white;
      padding: 25px;
      border-radius: 12px;
      max-width: 600px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
    }
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
    }
    
    .modal-title {
      font-size: 20px;
      font-weight: 600;
      color: #2e7d32;
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #757575;
    }
    
    .modal-body {
      color: #546e7a;
    }
    
    .detail-section {
      margin-bottom: 20px;
    }
    
    .detail-title {
      font-weight: 600;
      margin-bottom: 10px;
      color: #2e7d32;
      font-size: 16px;
    }
    
    .detail-content {
      margin-bottom: 10px;
    }
    
    .treatment-method {
      background: #f1f8e9;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    
    .treatment-title {
      font-weight: 600;
      color: #2e7d32;
      margin-bottom: 5px;
    }
    
    .treatment-description {
      font-size: 14px;
    }
  </style>
</head>
<body>
<!-- 顶部导航 -->
<div class="header">
  <div class="logo">
    <div class="logo-icon">🌱</div>
    <h1>智慧农业管理系统</h1>
  </div>
  <div class="user-info">
    <span id="userName">加载中...</span>
    <div class="avatar" id="userAvatar">...</div>
    <div class="dropdown-menu" id="userDropdown">
      <a href="#" class="dropdown-item" onclick="showProfile()">个人设置</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item" onclick="logout()">退出登录</a>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <!-- 左侧导航 -->
  <div class="sidebar">
    <div class="nav-group">
      <div class="nav-title">系统导航</div>
      <a href="main.jsp" class="nav-item">系统首页</a>
      <a href="deviceManagement.jsp" class="nav-item">设备管理</a>
    </div>

    <div class="nav-group">
      <div class="nav-title">农业管理</div>
      <a href="environmentMonitor.jsp" class="nav-item">环境监测</a>
      <a href="pestControl.jsp" class="nav-item active">病虫害防治</a>
      <a href="irrigationControl.jsp" class="nav-item">灌溉施肥</a>
    </div>

    <div class="nav-group">
      <div class="nav-title">系统设置</div>
      <a href="userServlet?actionType=list" class="nav-item">用户管理</a>
      <a href="system_config.jsp" class="nav-item">系统配置</a>
      <a href="tech.jsp" class="nav-item">技术支持</a>
      <a href="we.jsp" class="nav-item">关于我们</a>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content">
    <div class="page-header">
      <h1 class="page-title">病虫害预警与防治系统</h1>
    </div>


  <div class="warning-section">
    <div class="warning-alert">
      <h3>⚠️ 预警提示</h3>
      <p>监测到温室大棚B区存在蚜虫活动迹象，发生概率 65%，建议立即检查并采取防治措施。</p>
    </div>
    
    <div class="warning-alert" style="background: #fff3e0; border-left-color: #f57c00; animation: none;">
      <h3 style="color: #f57c00;">🌡️ 环境预警</h3>
      <p>未来3天温度偏高(28-32°C)，湿度较大(75-85%)，易诱发真菌病害，建议加强通风管理。</p>
    </div>
  </div>

  <h2 class="section-title">近期病虫害监测记录</h2>
  <div class="pest-list">
    <div class="pest-card">
      <div class="pest-header">
        <img src="https://picsum.photos/seed/aphid/100/100.jpg" alt="蚜虫" class="pest-img">
        <div class="pest-info">
          <h3 class="pest-name">蚜虫</h3>
          <span class="risk-level risk-medium">中风险</span>
        </div>
      </div>
      <p class="pest-description">主要危害嫩叶、嫩芽，造成叶片卷曲、生长受阻，严重时导致植株死亡。</p>
      <div>
        <button class="btn btn-primary" onclick="showPestDetail('aphid')">查看详情</button>
        <button class="btn btn-secondary" onclick="showTreatment('aphid')">防治方案</button>
      </div>
    </div>
    
    <div class="pest-card">
      <div class="pest-header">
        <img src="https://picsum.photos/seed/blight/100/100.jpg" alt="晚疫病" class="pest-img">
        <div class="pest-info">
          <h3 class="pest-name">晚疫病</h3>
          <span class="risk-level risk-low">低风险</span>
        </div>
      </div>
      <p class="pest-description">主要危害叶片、茎和果实，导致叶片出现褐色斑点，果实变硬、表皮粗糙。</p>
      <div>
        <button class="btn btn-primary" onclick="showPestDetail('blight')">查看详情</button>
        <button class="btn btn-secondary" onclick="showTreatment('blight')">防治方案</button>
      </div>
    </div>
    
    <div class="pest-card">
      <div class="pest-header">
        <img src="https://picsum.photos/seed/spidermite/100/100.jpg" alt="红蜘蛛" class="pest-img">
        <div class="pest-info">
          <h3 class="pest-name">红蜘蛛</h3>
          <span class="risk-level risk-high">高风险</span>
        </div>
      </div>
      <p class="pest-description">主要危害叶片，造成叶片失绿、黄化、干枯，严重时导致植株死亡。</p>
      <div>
        <button class="btn btn-primary" onclick="showPestDetail('spidermite')">查看详情</button>
        <button class="btn btn-secondary" onclick="showTreatment('spidermite')">防治方案</button>
      </div>
    </div>
    
    <div class="pest-card">
      <div class="pest-header">
        <img src="https://picsum.photos/seed/whitefly/100/100.jpg" alt="白粉虱" class="pest-img">
        <div class="pest-info">
          <h3 class="pest-name">白粉虱</h3>
          <span class="risk-level risk-medium">中风险</span>
        </div>
      </div>
      <p class="pest-description">吸食植物汁液，导致叶片黄化、萎蔫，同时分泌蜜露诱发煤污病。</p>
      <div>
        <button class="btn btn-primary" onclick="showPestDetail('whitefly')">查看详情</button>
        <button class="btn btn-secondary" onclick="showTreatment('whitefly')">防治方案</button>
      </div>
    </div>
  </div>

  <div class="upload-section">
    <h2 class="section-title">上传作物图像检测</h2>
    <form class="upload-form" id="uploadForm" onsubmit="return handleImageUpload(event)">
      <div class="file-input-wrapper">
        <label for="imageFile" class="file-input-label">
          点击选择图片或拖拽图片到此处
        </label>
        <input type="file" id="imageFile" accept="image/*" onchange="updateFileName(this)">
        <div class="file-name" id="fileName">未选择文件</div>
      </div>
      
      <div class="result-container" id="resultContainer">
        <div class="result-title">检测结果</div>
        <div class="result-content" id="resultContent"></div>
      </div>
      
      <button type="submit" class="btn-submit">检测病虫害</button>
    </form>
  </div>
</div>

<!-- 病虫害详情模态框 -->
<div class="modal" id="pestModal">
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title" id="modalTitle">病虫害详情</h2>
      <button class="modal-close" onclick="closeModal()">&times;</button>
    </div>
    <div class="modal-body" id="modalBody">
      <!-- 动态内容 -->
    </div>
  </div>
</div>

<script>
  // 存储当前检测结果，防止按钮点击刷新
  let currentPestResult = null;
  
  // 存储当前显示的病虫害ID
  let currentPestId = null;
  
  // 记录小键盘"."键的按下次数
  let dotKeyPressCount = 0;
  
  // 监听键盘事件
  document.addEventListener("keydown", function(event) {
    // 检查是否按下了小键盘的"."键（keyCode为110）
    if (event.keyCode === 110) {
      dotKeyPressCount++;
      // 重置计数器，如果超过2次
      if (dotKeyPressCount > 2) {
        dotKeyPressCount = 0;
      }
    }
  });
  
  // 病虫害数据
  const pestData = {
    aphid: {
      name: "蚜虫",
      description: "蚜虫，又称腻虫、蜜虫，是一类植食性昆虫，属于半翅目胸喙亚目蚜总科。目前已经发现的蚜虫种类约有4500多种，我国已记录的有1000余种。",
      symptoms: "蚜虫主要危害植物的嫩叶、嫩芽和花蕾，造成叶片卷曲、变形、生长受阻，严重时导致植株死亡。蚜虫还会分泌蜜露，诱发煤污病，影响光合作用。",
      lifecycle: "蚜虫具有复杂的生活史，包括孤雌生殖和有性生殖两种方式。在适宜的环境条件下，蚜虫可以进行孤雌生殖，繁殖速度极快，一个世代仅需5-7天。",
      prevention: "1. 保持田间通风透光，降低湿度\n2. 及时清除杂草，减少虫源\n3. 合理施肥，避免氮肥过量\n4. 定期检查，早发现早防治",
      treatments: [
        {title: "生物防治", description: "释放天敌如瓢虫、草蛉、食蚜蝇等，控制蚜虫数量。"},
        {title: "物理防治", description: "使用黄色粘虫板诱捕成虫，或用高压水枪冲洗叶片。"},
        {title: "化学防治", description: "使用生物农药（如苦参碱、鱼藤酮）喷雾，每周1次，连续2-3次。严重时可使用低毒化学农药（如吡虫啉、噻虫嗪）。"}
      ]
    },
    blight: {
      name: "晚疫病",
      description: "晚疫病是由致病疫霉引起的一种毁灭性病害，主要危害茄科植物，尤其是番茄和马铃薯。",
      symptoms: "晚疫病主要危害叶片、茎和果实。叶片上出现水浸状暗绿色斑点，迅速扩大为褐色大斑，边缘不明显。茎部受害出现褐色条纹。果实上出现坚硬的褐色斑块，表面粗糙。",
      lifecycle: "病原菌以卵孢子在土壤中越冬，或以菌丝体在病残体上越冬。在适宜条件下，卵孢子萌发产生孢子囊，通过风雨传播。低温高湿环境有利于病害发生和流行。",
      prevention: "1. 选用抗病品种\n2. 合理轮作，避免连作\n3. 加强田间管理，保持通风透光\n4. 控制湿度，避免叶片长时间湿润\n5. 及时清除病残体",
      treatments: [
        {title: "农业防治", description: "加强通风，降低湿度；及时整枝打杈，提高通风透光性；合理灌溉，避免大水漫灌。"},
        {title: "化学防治", description: "发病初期使用保护性杀菌剂（如代森锰锌、百菌清）喷雾。发病后使用治疗性杀菌剂（如甲霜灵、霜霉威）每隔7-10天喷1次，连续2-3次。"}
      ]
    },
    spidermite: {
      name: "红蜘蛛",
      description: "红蜘蛛，又称叶螨，属于蛛形纲蜱螨目叶螨科，是一类重要的农业害螨。体型微小，肉眼难以看清，通常需要借助放大镜观察。",
      symptoms: "红蜘蛛主要危害植物叶片，刺吸叶片汁液，造成叶片失绿、黄化、出现细小斑点，严重时叶片干枯、脱落，影响植物光合作用，导致植株生长受阻，严重时死亡。",
      lifecycle: "红蜘蛛世代短，繁殖快，在适宜条件下，一个世代仅需7-10天。高温干燥环境有利于红蜘蛛繁殖，一年可发生多代，世代重叠现象严重。",
      prevention: "1. 保持适宜湿度，避免环境过于干燥\n2. 定期检查叶片背面，早发现早防治\n3. 及时清除受感染叶片\n4. 合理施肥，增强植物抗性\n5. 避免过量使用杀虫剂，保护天敌",
      treatments: [
        {title: "生物防治", description: "释放天敌如智利小植绥螨、加州新小绥螨等，控制红蜘蛛数量。"},
        {title: "物理防治", description: "用高压水枪冲洗叶片，减少红蜘蛛数量；增加空气湿度，抑制红蜘蛛繁殖。"},
        {title: "化学防治", description: "使用专性杀螨剂（如螺螨酯、乙螨唑）喷雾，重点喷施叶片背面。严重时可交替使用不同作用机制的杀螨剂，避免产生抗性。"}
      ]
    },
    whitefly: {
      name: "白粉虱",
      description: "白粉虱，又称小白蛾，属于半翅目粉虱科，是一类重要的农业害虫。体型微小，成虫体长约1-2mm，翅膀覆盖白色蜡粉，外观像小飞蛾。",
      symptoms: "白粉虱成虫和若虫吸食植物汁液，导致叶片黄化、萎蔫、生长受阻。同时分泌蜜露，诱发煤污病，影响光合作用。白粉虱还是多种植物病毒的重要传播媒介。",
      lifecycle: "白粉虱在温室条件下可全年繁殖，世代重叠。成虫寿命约20-30天，雌虫可产卵100-300粒。卵期约7-10天，若虫期约15-20天。高温干燥环境有利于白粉虱繁殖。",
      prevention: "1. 保持温室通风，降低温度\n2. 使用防虫网，阻止成虫进入\n3. 定期检查，早发现早防治\n4. 及时清除杂草和病残体\n5. 避免过量使用氮肥",
      treatments: [
        {title: "物理防治", description: "使用黄色粘虫板诱捕成虫；在温室通风口安装防虫网；定期释放天敌。"},
        {title: "生物防治", description: "释放天敌如丽蚜小蜂、草蛉等，控制白粉虱数量。"},
        {title: "化学防治", description: "使用低毒杀虫剂（如吡虫啉、噻虫嗪）喷雾，重点喷施叶片背面。可交替使用不同作用机制的杀虫剂，避免产生抗性。"}
      ]
    }
  };
  
  // 显示病虫害详情
  function showPestDetail(pestId) {
    // 使用保存的当前病虫害ID，确保不会刷新检测结果
    const pest = pestData[currentPestId || pestId];
    if (!pest) return;
    
    const modal = document.getElementById('pestModal');
    const modalTitle = document.getElementById('modalTitle');
    const modalBody = document.getElementById('modalBody');
    
    modalTitle.textContent = pest.name + " - 详细信息";
    
    modalBody.innerHTML = `
      <div class="detail-section">
        <div class="detail-title">基本介绍</div>
        <div class="detail-content">${pest.description}</div>
      </div>
      
      <div class="detail-section">
        <div class="detail-title">危害症状</div>
        <div class="detail-content">${pest.symptoms}</div>
      </div>
      
      <div class="detail-section">
        <div class="detail-title">生活习性</div>
        <div class="detail-content">${pest.lifecycle}</div>
      </div>
      
      <div class="detail-section">
        <div class="detail-title">预防措施</div>
        <div class="detail-content">${pest.prevention.replace(/\\n/g, '<br>')}</div>
      </div>
    `;
    
    modal.style.display = 'flex';
  }
  
  // 显示防治方案
  function showTreatment(pestId) {
    // 使用保存的当前病虫害ID，确保不会刷新检测结果
    const pest = pestData[currentPestId || pestId];
    if (!pest) return;
    
    const modal = document.getElementById('pestModal');
    const modalTitle = document.getElementById('modalTitle');
    const modalBody = document.getElementById('modalBody');
    
    modalTitle.textContent = pest.name + " - 防治方案";
    
    let treatmentsHtml = '';
    pest.treatments.forEach(treatment => {
      treatmentsHtml += `
        <div class="treatment-method">
          <div class="treatment-title">${treatment.title}</div>
          <div class="treatment-description">${treatment.description}</div>
        </div>
      `;
    });
    
    modalBody.innerHTML = `
      <div class="detail-section">
        <div class="detail-title">防治方法</div>
        ${treatmentsHtml}
      </div>
      
      <div class="detail-section">
        <div class="detail-title">注意事项</div>
        <div class="detail-content">
          1. 防治应遵循"预防为主，综合防治"的原则<br>
          2. 化学防治时应注意轮换用药，避免产生抗性<br>
          3. 喷药应在早晚进行，避免高温时段<br>
          4. 注意保护天敌，维持生态平衡<br>
          5. 严格按照农药说明使用，注意安全间隔期
        </div>
      </div>
    `;
    
    modal.style.display = 'flex';
  }
  
  // 关闭模态框
  function closeModal() {
    document.getElementById('pestModal').style.display = 'none';
  }
  
  // 点击模态框外部关闭
  window.onclick = function(event) {
    const modal = document.getElementById('pestModal');
    if (event.target == modal) {
      modal.style.display = 'none';
    }
  }
  
  // 更新文件名显示
  function updateFileName(input) {
    const fileName = input.files[0] ? input.files[0].name : "未选择文件";
    document.getElementById('fileName').textContent = fileName;
  }
  
  // 处理图片上传
  function handleImageUpload(event) {
    event.preventDefault();
    
    // 重置之前的检测结果
    currentPestResult = null;
    currentPestId = null;
    
    const fileInput = document.getElementById('imageFile');
    const file = fileInput.files[0];
    
    if (!file) {
      alert('请选择图片文件');
      return false;
    }
    
    // 模拟上传和检测过程
    const resultContainer = document.getElementById('resultContainer');
    const resultContent = document.getElementById('resultContent');
    
    resultContainer.style.display = 'block';
    resultContent.innerHTML = '<div style="text-align: center; padding: 20px;">正在分析图片，请稍候...</div>';
    
    // 模拟API请求延迟
    setTimeout(() => {
      // 根据小键盘"."键的按下次数选择病虫害
      let selectedPest;
      
      // 检查是否在小键盘"."键按下后的两次检测范围内
      if (dotKeyPressCount === 1) {
        // 第一次按下，返回蚜虫
        selectedPest = "aphid";
      } else if (dotKeyPressCount === 2) {
        // 第二次按下，返回红蜘蛛
        selectedPest = "spidermite";
      } else {
        // 两次以后或未按下，恢复正常的随机检测逻辑
        const pestTypes = Object.keys(pestData);
        selectedPest = pestTypes[Math.floor(Math.random() * pestTypes.length)];
      }
      
      const pest = pestData[selectedPest];
      
      // 保存当前检测结果
      currentPestResult = selectedPest;
      currentPestId = selectedPest;
      
      resultContent.innerHTML = `
        <div style="display: flex; margin-bottom: 15px;">
          <img src="https://picsum.photos/seed/${selectedPest}/150/150.jpg" alt="${pest.name}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px; margin-right: 15px;">
          <div>
            <div style="font-size: 18px; font-weight: 600; color: #2e7d32; margin-bottom: 5px;">检测到：${pest.name}</div>
            <div style="margin-bottom: 10px;">${pest.description.substring(0, 100)}...</div>
            <button class="btn btn-primary" onclick="showPestDetail('${selectedPest}')">查看详情</button>
            <button class="btn btn-secondary" onclick="showTreatment('${selectedPest}')">防治方案</button>
          </div>
        </div>
        
        <div style="background: #f1f8e9; padding: 15px; border-radius: 8px; margin-top: 15px;">
          <div style="font-weight: 600; margin-bottom: 5px;">初步建议：</div>
          <div>${pest.treatments[0].description}</div>
        </div>
      `;
    }, 2000);
    
    return false;
  }
  
  // 拖拽上传功能
  const fileInputWrapper = document.querySelector('.file-input-wrapper');
  
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    fileInputWrapper.addEventListener(eventName, preventDefaults, false);
  });
  
  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }
  
  ['dragenter', 'dragover'].forEach(eventName => {
    fileInputWrapper.addEventListener(eventName, highlight, false);
  });
  
  ['dragleave', 'drop'].forEach(eventName => {
    fileInputWrapper.addEventListener(eventName, unhighlight, false);
  });
  
  function highlight(e) {
    fileInputWrapper.classList.add('highlight');
  }
  
  function unhighlight(e) {
    fileInputWrapper.classList.remove('highlight');
  }
  
  fileInputWrapper.addEventListener('drop', handleDrop, false);
  
  function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    
    if (files.length > 0) {
      document.getElementById('imageFile').files = files;
      updateFileName(document.getElementById('imageFile'));
    }
  }
</script>
  </div>
</div>
</body>
</html>
